<template>
  <div class="v-header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"/>
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">粥品香坊（回龙观）</span>
        </div>
        <div class="description">
          蜂鸟专送/38分钟送达
        </div>
        <div class="support">
          <span class="icon decrease"></span>
          <span class="text">在线支付满28减5</span>
        </div>
        <div class="support-count">
          <span class="count">5个</span>
          <i class="icon-keyboard_arrow_right"></i>
        </div>
      </div>
    </div>
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span>
      <span class="bulletin-text">粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。</span>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="background">
      <img src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"
           width="100%"
           height="100%"
      />
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="stylus" scoped>
  @import "~common/stylus/mixin.styl"
  @import "~common/stylus/variable"
  .v-header
    position: relative
    overflow: hidden
    color: #fff
    background-color: $color-header-background
    .content-wrapper
      position: relative
      padding: 24px 12px 18px 24px
      font-size: 0  // font-size: 0;解决inline元素间的空白间隙
      .avatar
        display: inline-block
        vertical-align: top // 把元素的顶端与行中最高元素的顶端对齐
        border-radius: 2px
      .content
        display: inline-block
        margin-left: 16px
        .title
          margin: 2px 0 8px 0 // 上右下左
          .brand
            display: inline-block
            width: 30px
            height: 18px
            vertical-align: top
            bg-image("brand")
            background-size: 30px 18px
            background-repeat: no-repeat
          .name
            margin-left: 6px
            font-size: $font-size-medium-x
            font-weight: bold
            line-height: 18px
        .description
          margin-bottom:10px
          line-height: 12px
          font-size: $font-size-small
          font-weight: 200
        .support
          margin: 10px 0 2px 0
          font-size: $font-size-small-s
          .icon
            display: inline-block
            width: 12px
            height: 12px
            margin-right: 4px
            vertical-align: middle
            background-size: 12px 12px
            background-repeat: no-repeat
            &.discount
              bg-image("discount_1")
            &.decrease
              bg-image("decrease_1")
            &.guarantee
              bg-image("guarantee_1")
            &.invoice
              bg-image("invoice_1")
            &.special
              bg-image("special_1")
          .text
            line-height: 12px
      .support-count
        position: absolute
        right: 12px
        bottom: 14px
        padding: 0 8px
        height: 24px
        border-radius: 14px
        background: rgba(0,0,0,0.2)
        text-align: center
        .count
          vertical-align: top
          font-size: $font-size-small-s
          line-height: 24px
        .icon-keyboard_arrow_right
          margin-left: 2px
          font-size: $font-size-small-s
          line-height: 24px
    .bulletin-wrapper
      position: relative
      height: 28px
      padding: 0 22px 0 12px
      background: rgba(7,17,27,0.2)
      no-wrap()
      .bulletin-title
        display: inline-block
        margin-right: 4px
        width: 22px
        height: 12px
        vertical-align: middle
        background-size: 22px 12px
        background-repeat: no-repeat
        bg-image('bulletin')
      .bulletin-text
        font-size: $font-size-small-s
        line-height: 28px
      .icon-keyboard_arrow_right
        position: absolute
        font-size: $font-size-small-s
        right: 12px
        top: 10px
    .background
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index: -1
      filter: blur(10px)
</style>
